{% extends "base.html" %}
{% block title %}<title>index</title>{% endblock %}
{% block content %}
<div>
    <span class="label label-info"style="background-color: #62c462;font-size: 24.844px;padding:14px 4px;border-radius: 17px " >服务器{{ hostall }}台</span>
{#    <span class="label label-info"style="background-color: #62c462;font-size: 24.844px;padding:14px 4px;border-radius: 17px " >服务器组{{ hostall }}</span> #}
    <span class="label label-info"style="background-color: #62c462;font-size: 24.844px;padding:14px 4px;border-radius: 17px " >项目数:{{ svnall }}</span>
{#	<a href="#"><span class="label label-warning">Add Server</span></a>&nbsp;&nbsp;#}
{#	<a href="#"><span class="label label-inverse">Del Server</span></a>#}
<div class="pull-right">
	<form class="form-search" method="POST">
	<input type="text" name ="search" class="input-medium search-query" placeholder="Search">
	<button type="submit" class="btn">Search</button>&nbsp;&nbsp;
	</form>
</div>
</div>
	<hr>

      <table class="table table-bordered table-striped table-condensed">
		<thead>
			<tr>
			<th>Host Name</th>
			<th>公网 IP:Port</th>
			<th>内部 IP:Port</th>
{#			<th>Host User</th>#}
{#			<th>Script Dir</th>#}
			<th width="200">备注</th>
			</tr>
		</thead>
		<tbody>
			{% for host in hosts %}
			<tr>
{#			<td><a href="{% url app01.views.hostedit host.id %}" title="Edit Server">{{host.host_name}}</a></td>#}
			<td><a data-toggle="modal" data-target="#myModal1" href="#" title="详细信息">{{host.host_name}}</a></td>
			<td>{{host.host_w_ip}}:{{host.host_w_port}}</td>
			<td>{{host.host_n_ip}}:{{host.host_n_port}}</td>
{#			<td>{{host.host_user}}</td>#}
{#			<td>{{host.script_dir}}</td>#}
			<td>
{#				<div class="btn-group">#}
{#					<a class="btn" href="#" title="Edit Server">Edit</a>#}
{#					<a class="btn" href="{% url app01.views.hostedit host.id %}" title="Edit Server">Edit</a>#}
{#					<a class="btn" href="{% url app01.views.hostdel host.id %}" title="Del Server" >Del</a>#}
{#					<a class="btn" href="#" title="Del Server" >Del</a>#}
{#					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Add Group<span class="caret"></span></a>#}
{#					<ul class="dropdown-menu">#}
{#					{% for hostgroup in hostgroups %}#}
{#					<li><a href="#" name="addservergroup" id="{{hostgroup.id}}" value="{{host.id}}">{{hostgroup.host_groupname}}</a></li>#}
{#					{% endfor %}#}
{#					</ul>#}
{#				</div>#}
			</td>
			</tr>
			{% endfor %}
		</tbody>
	  </table>

	  <div class="modal hide fade" id="myModal">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">×</a>
			<h3>Add Group Status</h3>
		</div>
	  <div class="modal-body">
		<span class="label label-success" id="addgroupstatus"></span>
	  </div>
	  </div>	
	  
  <div class="pagination pagination-centered">
	  <div class="pull-right"><span class="label">{{hosts}}</span></div>
		<ul>{% if not hosts.has_previous %}
			<li class="active"><a>前一页</a></li>
			{% endif %}
			{% if hosts.has_previous %}
			<li><a href="?page={{ hosts.previous_page_number }}">前一页</a></li>
			{% endif %}
			{% if not hosts.has_next %}
			<li class="active"><a>后一页</a></li>
			{% endif %}
			{% if hosts.has_next %}
			<li><a href="?page={{ hosts.next_page_number }}">后一页</a></li>
			{% endif %}
		</ul>
	  </div>



    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel1">
					主机资产详细信息
				</h4>
                {{ test }}
			</div>
{#			<div class="modal-body">#}
{#				请稍候#}
{#			</div>#}
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
{#				<button type="button" class="btn btn-primary">#}
{#					提交更改#}
{#				</button>#}
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>





{% endblock %}
